<template>
  <div class="container-item-tag-2">
    <div class="item-tag-base item-tag-name-2">全部</div>
    <div v-for="(temp_2, index_2) in tag_2" :key="index_2" class="item-tag-base item-tag-name-2">{{ temp_2.name }}</div>
    <div class="item-tag-base item-add-tag-btn el-icon-plus" @click="addTag_2" />
  </div>
</template>

<script>
import { getTag_2, createTag_2 } from '@/api/miva';
export default {
  props: {
    tagId: {
      type: [Number, String],
      default: 0
    }
  },
  data() {
    return {
      tag_2: []
    };
  },
  async mounted() {
    await this.getTag_2();
  },
  methods: {
    // 获取二级标签
    async getTag_2() {
      const res = await getTag_2({ tag_1_id: this.tagId });
      const arr = [];
      for (const val of res.data) {
        arr.push({ id: val.id, name: val.tag_2_name });
      }
      this.tag_2 = arr;
    },
    // 添加二级标签
    async addTag_2() {
      this.$prompt('请输入新的二级标签', '添加新标签', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(async({ value }) => {
          if (value) {
            await createTag_2({ tag_1_id: this.tagId, tag_2_name: value });
            await this.getTag_2();
          }
        })
        .catch(() => {});
    }
  }
};
</script>

<style lang="scss" scoped>
.container-item-tag-2 {
  padding-left:50px;
  display: flex;
  flex-wrap: wrap;
  .item {
    &-add-tag-btn {
      width: 90px;
      border: 1px dashed #888;
      font-weight: bold;
    }
    &-tag-base {
      display: inline-block;
      // width: 90px;
      height: 21px;
      line-height: 21px;
      margin-right: 20px;
      margin-bottom: 10px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      border-radius: 30px;
      font-size: 12px;
      text-align: center;
      cursor: pointer;
    }
  }
}
</style>
